<template>
    <!-- 监控 Main view of Monitor -->
    <div class="mon-data-view">
        <div class="header">
            <div class="title">全景数据可视化</div>
        </div>
        <div class="row content">
            <div class="col-3">
                <div class="left"></div>
            </div>
            <div class="col-6">
                <div class="row gy-5">
                    <div class="col-12">
                        <iframe height="900px" width="1600px"
                                src="https://www.thingjs.com/s/a014ae595c99e9ffc05fc056?params=105b0f77fd24654d4eebc434e9"
                        ></iframe>
<!--                        src="about:blank"-->
<!--                        src="https://www.thingjs.com/s/a014ae595c99e9ffc05fc056?params=105b0f77fd24654d4eebc434e9"-->
                        <div class="frame-masker"></div>
                    </div>
                    <div v-for="count in 6" class="col-4" :key="count">
                        <div class="shortcut">
                            <div class="image-masker"></div>
                            <img :src="'/media/main/monitor/sample-station/sample' + count + '.jpg'">
                            <div class="station">某充电场站</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="right"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Index"
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/sass/_init.scss";

    .mon-data-view {
        width: $view-lg-width;
        height: $view-lg-height;
        overflow: hidden;

        .header {
            position: absolute;

            width: $view-lg-width;
            height: 321px;

            background-image: url("/media/main/common/header.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: 50% -40px;

            .title {
                position: absolute;
                left: calc(50% - 225px);
                top: 20px;
                font-family: zzgflh, "微软雅黑", serif;
                font-size: $font-size-base * 5;
                background-image: -webkit-linear-gradient(#00ffff, #ffffff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        .content {
            margin-top: 150px;
            margin-left: 100px;
            margin-right: 100px;
            font-size: $font-size-base * 5;
            color: white;

            .frame-masker {
                position: absolute;
                width: 1600px;
                height: 900px;
                top: 180px;

                background-image: url("/media/layout/bg/bg-mask-blue.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            .shortcut {
                .image-masker {
                    position: absolute;
                    width: 500px;
                    height: 300px;

                    border: 3px solid #1C3238;

                    background-image: url("/media/layout/bg/bg-mask-blue.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                img {
                    width: 500px;
                    height: 300px;
                }
                .station {
                    text-align: center;
                    color: white;
                    font-family: "微软雅黑", serif;
                    font-size: $font-size-base * 3;
                }
            }
            .left {
                height: 1700px;
                background-image: url("/media/main/monitor/left.png");
                background-repeat: no-repeat;
                background-size: cover;
            }
            .right {
                height: 1700px;
                background-image: url("/media/main/monitor/right.png");
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    }
</style>